<template>
    <ui-main title="整行编辑" back>

        <ui-tr-edit :rowData="form" :tableData="tableData" :editedList="editedList" validate trEditId="table_1"
            trEditFormRef="trEditForm" @confirm="fnConfirm" @cancel="fnCancel">
            <el-table size="mini" :data="tableData" border>
                <el-table-column align="center" label="序号" type="index"></el-table-column>
                <el-table-column label="输入框" prop="input"></el-table-column>
                <el-table-column label="数字" prop="number"></el-table-column>
                <el-table-column label="日期" prop="date"></el-table-column>
                <el-table-column label="单选" prop="selectLabel"></el-table-column>
                <el-table-column label="多选" prop="selectMultipleLabel"></el-table-column>
                <el-table-column label="操作" class-name="tr-edit-operate">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.$index, scope.row, 'table_1')" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-form :model="form" :rules="rules" ref="trEditForm" slot="trEditForm">
                <el-form-item>
                    {{index}}
                </el-form-item>
                <el-form-item prop="input">
                    <el-input size="small" v-model="form.input"></el-input>
                </el-form-item>
                <el-form-item prop="number">
                    <el-input-number size="small" v-model="form.number"></el-input-number>
                </el-form-item>
                <el-form-item prop="date">
                    <ui-date-time-picker size="small" v-model="form.date" type="date" placeholder="选择日期"></ui-date-time-picker>
                </el-form-item>
                <el-form-item prop="selectId">
                    <ui-select size="small" :option="option" :model-id.sync="form.selectId" :model-label.sync="form.selectLabel" value-key="id"></ui-select>
                </el-form-item>
                <el-form-item prop="selectMultipleId">
                    <ui-select size="small" :option="option"
                        :model-id.sync="form.selectMultipleId"
                        :model-label.sync="form.selectMultipleLabel"
                        multiple
                        value-key="id"></ui-select>
                </el-form-item>
            </el-form>
        </ui-tr-edit>

        <div class="m-t-10">
            <el-button @click="getRowData">修改后的当前行数据</el-button>
            <el-button @click="getEditedListData" type="primary">修改的列表数据</el-button>
        </div>

        <ui-load-md file="trEdit"></ui-load-md>
    </ui-main>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            index: 0,
            tableData: [
                {
                    id: '1',
                    input: '王小鼠',
                    number: 1,
                    date: '2017-09-12',
                    selectId: '选项2',
                    selectLabel: '双皮奶',
                    selectMultipleId: '选项1',
                    selectMultipleLabel: '黄金糕'
                },
                {
                    id: '2',
                    input: '王小牛',
                    number: 2,
                    date: '2017-09-13',
                    selectId: '选项2',
                    selectLabel: '双皮奶',
                    selectMultipleId: '选项1',
                    selectMultipleLabel: '黄金糕'
                },
                {
                    id: '3',
                    input: '王小虎',
                    number: 3,
                    date: '2017-09-14',
                    selectId: '选项2',
                    selectLabel: '双皮奶',
                    selectMultipleId: '选项1',
                    selectMultipleLabel: '黄金糕'
                },
                {
                    id: '4',
                    input: '王小兔',
                    number: 4,
                    date: '2017-09-15',
                    selectId: '选项2',
                    selectLabel: '双皮奶',
                    selectMultipleId: '选项1',
                    selectMultipleLabel: '黄金糕'
                }
            ],
            form: {},
            option: [
                {
                    id: '选项1',
                    label: '黄金糕'
                },
                {
                    id: '选项2',
                    label: '双皮奶'
                },
                {
                    id: '选项3',
                    label: '蚵仔煎'
                },
                {
                    id: '选项4',
                    label: '龙须面'
                },
                {
                    id: '选项5',
                    label: '北京烤鸭'
                }
            ],
            rules: {
                input: [
                    { required: true, message: '请输入名称', trigger: 'change' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
                ],
                number: [{ type: 'number', required: true, message: '请输入数字', trigger: 'change' }],
                date: [{ required: true, message: '请选择时间', trigger: 'change' }],
                selectId: [{ required: true, message: '请选择', trigger: 'change' }],
                selectMultipleId: [{ required: true, message: '请选择', trigger: 'change' }]
            },
            editedList: []
        }
    },
    mounted() {},
    watch: {},
    methods: {
        /*copyData(data, copy) {
                for(let i in copy){
                    data[i] = copy[i];
                }
            },*/
        handleEdit(index, rowData, trEditId) {
            //修改
            this.index = +index + 1
            this.form = rowData
            this.$nextTick(() => {
                // this.$root.$emit('trEditEmit', index);
                this.$store.commit('trEdit/change', {
                    index: index,
                    trEditId: trEditId
                })
            })
        },
        getRowData() {
            console.log(this.form)
        },
        getEditedListData() {
            console.log(this.editedList)
        },
        fnConfirm() {
            console.log('I am Confirm Funciton')
        },
        fnCancel() {
            console.log('I am Cancel Funciton')
        }
    }
}
</script>
<style lang="scss">
</style>
